<script setup lang="ts">
import { computed, ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import Login from '@/components/login/index.vue';
import { useIntervalFn } from '@/hooks/useIntervalFn';
import { useReadCard } from '@/hooks/useReadCard';
import { buildAssetSource } from '@/utils';
import { currRoute, withQueryString } from '@/utils/router.utils';

const { readCard, stopReadCard } = useReadCard();

// 识别状态
enum RECOGNIZE_STATUS {
  // 初始化
  INIT,
  // 识别中
  RECOGNIZING,
  // 识别成功
  SUCCESS,
  // 识别失败
  FAIL
}

const recognizeStatus = ref<RECOGNIZE_STATUS>(RECOGNIZE_STATUS.INIT);

// 状态描述文案
const recognizeStatusDesc = computed(() => {
  let statusText = {
    title: '',
    desc: ''
  };
  switch (recognizeStatus.value) {
    case RECOGNIZE_STATUS.INIT:
      statusText = {
        title: '就诊卡登录',
        desc: '请将就诊卡放置于扫描区或刷卡'
      };
      break;
    case RECOGNIZE_STATUS.RECOGNIZING:
      statusText = {
        title: '就诊卡扫描',
        desc: '正在扫描就诊卡'
      };
      break;
    case RECOGNIZE_STATUS.SUCCESS:
      statusText = {
        title: '扫描成功',
        desc: '就诊卡扫描成功，请稍后...'
      };
      break;
    case RECOGNIZE_STATUS.FAIL:
      statusText = {
        title: '扫描失败',
        desc: '扫描失败,请重新放置就诊卡'
      };
      break;
  }
  return statusText;
});

const progress = ref(0);

const { pause: stopScanProgress, resume: startScanProgress } = useIntervalFn(() => {
  if (progress.value >= 100) {
    progress.value = 100;
    stopScanProgress();
    stopReadCard();
    recognizeStatus.value = RECOGNIZE_STATUS.FAIL;
    return;
  }
  progress.value += progress.value < 50 ? 0.1 : 0.01;
}, 16.7, { immediate: false });

function handleStartScan() {
  recognizeStatus.value = RECOGNIZE_STATUS.RECOGNIZING;
  progress.value = 0;
  startScanProgress();

  readCard().then(res => {
    console.log('>>>读取身份证res', res);
    recognizeStatus.value = RECOGNIZE_STATUS.SUCCESS;
    const { query } = currRoute();
    const { name, idno, birthDate, sex, address } = res;
    setTimeout(() => {
      uni.navigateTo({
        url: withQueryString('/pages/login/loginConfirm', { ...query, name, idno, birthDate, sex, address })
      });
    }, 300);
  }).catch(() => {
    recognizeStatus.value = RECOGNIZE_STATUS.FAIL;
  }).finally(() => {
    stopScanProgress();
  });
}

const loginRef = ref<InstanceType<typeof Login>>();

function onOpenLogin() {
  loginRef.value?.onOpenLoginModal();
}
</script>

<template>
  <view class="patient-login flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="patient-login__cover m-auto mt-45">
        <image :src="buildAssetSource('login-jzk.png')" class="h-128 w-128" />
      </view>
      <view class="patient-login__title mt-34">
        {{ recognizeStatusDesc.title }}
      </view>
      <view class="patient-login__desc mt-34">
        {{ recognizeStatusDesc.desc }}
      </view>

      <view class="mt-48 px-162">
        <view class="patient-login__content">
          <!-- 初始化 -->
          <view v-if="recognizeStatus === RECOGNIZE_STATUS.INIT" class="pt-60">
            <view class="idcard-content__title text-center">
              就诊卡感应区
            </view>
            <view class="mt-45 flex-center">
              <image :src="buildAssetSource('arrow-scope.png')" class="mr-35 h-108 w-108 rotate-180" />
              <image :src="buildAssetSource('login-patient-card.png')" class="h-370 w-296" />
              <image :src="buildAssetSource('arrow-scope.png')" class="ml-35 h-108 w-108" />
            </view>
          </view>

          <!-- 识别中 -->
          <view v-if="recognizeStatus === RECOGNIZE_STATUS.RECOGNIZING" class="pb-44">
            <view class="mb-70 flex-center px-105 pt-60">
              <image :src="buildAssetSource('card-person.png')" class="h-384 w-full" />
            </view>
            <view class="progress px-55">
              <wd-progress :percentage="progress" hide-text :duration="0" />
            </view>
            <view class="progress-text mt-54">
              就诊卡扫描中,请稍后...
            </view>
          </view>

          <!-- 识别成功 -->
          <view v-if="recognizeStatus === RECOGNIZE_STATUS.SUCCESS" class="pb-58 pt-74">
            <view class="complete-icon flex-center">
              <image :src="buildAssetSource('dui.png')" class="h-105 w-105" />
            </view>
            <view class="complete-info mt-46">
              就诊卡信息已验证
            </view>
            <view class="progress-text mt-33">
              正在为您登录系统...
            </view>

            <view class="mt-70 flex-center">
              <image :src="buildAssetSource('loading.png')" class="h-130 w-130 animate-spin" />
            </view>
          </view>

          <!-- 识别失败 -->
          <view v-if="recognizeStatus === RECOGNIZE_STATUS.FAIL" class="pb-93 pt-74">
            <view class="complete-icon flex-center">
              <image :src="buildAssetSource('login-close.png')" class="h-105 w-105" />
            </view>
            <view class="complete-info mt-36">
              就诊卡扫描失败
            </view>
            <view class="progress-text mt-33">
              请检查就诊卡放置位置并重试
            </view>
          </view>
        </view>
      </view>

      <view v-if="recognizeStatus === RECOGNIZE_STATUS.INIT" class="mt-46 flex-center">
        <view class="action-btn w-708">
          <wd-button block @click="handleStartScan">
            开始识别
          </wd-button>
        </view>
      </view>

      <view v-if="recognizeStatus === RECOGNIZE_STATUS.FAIL" class="my-86 flex-center">
        <view class="action-btn w-371">
          <wd-button block @click="handleStartScan">
            重试
          </wd-button>
        </view>
        <view class="action-btn ml-30 w-371">
          <wd-button block @click="onOpenLogin">
            更换方式
          </wd-button>
        </view>
      </view>

      <view class="mt-50 px-50">
        <view class="login-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 使用提示
          </view>
          <view class="tips-content">
            <view>
              1.请将就诊卡芯片面朝上放置
            </view>
            <view class="mt-10">
              2.确保就诊卡平整，无遮挡
            </view>
            <view class="mt-10">
              3.扫描过程中请勿移动就诊卡
            </view>
          </view>
        </view>
      </view>

      <Login ref="loginRef" />
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户登录',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.patient-login {
  background-color: var(--bg-color);
  height: 100%;

  .patient-login__cover {
    @apply flex-center;
    background: #e5efff;
    width: 202px;
    height: 202px;
    border-radius: 50%;
  }

  .patient-login__title {
    color: var(--text-color);
    font-weight: bold;

    font-size: 60px;
    text-align: center;
  }

  .patient-login__desc {
    font-size: 28px;
    color: var(--secondary-text-color);
    text-align: center;
  }

  .patient-login__content {
    background: #fff;
    border-radius: 20px;

    .idcard-content__title {
      font-size: 36px;
      font-weight: 500;

      color: var(--text-color);
    }

    .idcard-content__desc {
      background: #e5efff;
      border-radius: 10px;
      color: var(--secondary-text-color);
      display: inline-block;
      padding: 24px 36px;
      font-size: 28px;
      margin: 45px auto;
    }

    .progress {
      --wot-progress-height: 30px;
      --wot-progress-bg: #c0dcff;
      --wot-progress-color: var(--primary);
    }

    .progress-text {
      font-size: 28px;
      color: var(--secondary-text-color);
      text-align: center;
    }

    .complete-icon {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: #e5efff;
      margin: 0 auto;
    }

    .complete-info {
      text-align: center;
      font-size: 48px;
      font-weight: bold;
      color: var(--text-color);
    }
  }

  .action-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .login-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
